<template>
    <div>
        <el-tabs v-model="activeName">
            <el-tab-pane label="导入学生信息" name="stu">
                <el-card>
                    <h1>学生信息导入</h1>
                    <div class="link_stu">
                        <el-link :href="temp_stu" type="primary">学生模板下载</el-link>
                    </div>
                    <div class="download_stu">
                        <span class="demonstration">*导入之前先选择期数</span>
                        <el-select v-model="schoolId" placeholder="请选择期数">
                            <el-option
                              v-for="(item,index) in options_stu"
                              :key="index"
                              :label="item.cg_periods"
                              :value="item.school_id">
                            </el-option>
                        </el-select>
                        <el-upload
                          class="upload-demo"
                          drag
                          :http-request="upload_student"
                          action="localhost:8081/upload"
                          accept=".xls,.xlsx"
                          multiple>
                          <i class="el-icon-upload"></i>
                          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                          <div class="el-upload__tip" slot="tip">只能上传xls,xlsx文件</div>
                        </el-upload>   
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="导入教师信息" name="tec">
                <el-card>
                    <h1>教师信息导入</h1>
                    <div class="download_stu">
                        <el-link :href="temp_tea" type="primary">教师信息模板下载</el-link>
                        <el-upload
                          class="upload-demo"
                          drag
                          :http-request="upload_teacher"
                          action="localhost:8081/upload"
                          accept=".xls,.xlsx"
                          multiple>
                          <i class="el-icon-upload"></i>
                          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                          <div class="el-upload__tip" slot="tip">只能上传xls,xlsx文件</div>
                        </el-upload>   
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="导入课表信息" name="course">
                <el-card>
                    <h1>课表信息导入</h1>
                    <div class="link_stu">
                        <el-link :href="temp_course" type="primary">导入课表模板下载</el-link>
                    </div>
                    <div class="download_stu">
                        <!-- <el-link :href="temp_course" type="primary">导入课表模板下载</el-link> -->
                        <span class="demonstration">*导入之前先选择期数</span>
                        <el-select v-model="schoolId_c" placeholder="请选择期数">
                            <el-option
                              v-for="(item,index) in options_stu"
                              :key="index"
                              :label="item.cg_periods"
                              :value="item.school_id">
                            </el-option>
                        </el-select>
                        <el-upload
                          class="upload-demo"
                          drag
                          :http-request="upload_course"
                          action="localhost:8081/upload"
                          accept=".xls,.xlsx"
                          multiple>
                          <i class="el-icon-upload"></i>
                          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                          <div class="el-upload__tip" slot="tip">只能上传xls,xlsx文件</div>
                        </el-upload>   
                    </div>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import {SERVER_BASE} from "@/api/config";
    import fileImport from '@/api/fileImport';
    import axios from 'axios'

    export default {
        name: "infoImport",
        data() {
            return {
                activeName: 'stu',
                value1: 'studentInfo',
                showDownloadLink:'',
                showDemo: false,
                dialogVisible:false,
                demoUrl:"",
                InfoDownloadLink: '',
                temp_stu: SERVER_BASE + '/download/student_Info',
                temp_tea: SERVER_BASE + '/download/teacher_Info',
                temp_course: SERVER_BASE + '/download/scheduleOfCourse_Info',
                schoolId: '',   // 上传学生信息期数ID
                schoolId_c: '', // 上传课程期数id区分一下
                options_stu: []
            }
        },
        methods: {
            download(data) {
                if (!data) {
                    return
                }
                let blob = new Blob([data.data], {type: 'application/x-www-form-urlencoded'})
                let url = window.URL.createObjectURL(blob);
                console.log(url);
                let aLink = document.createElement("a");
                aLink.style.display = "none";
                aLink.href = url;
                aLink.setAttribute("download", name+"错误信息反馈.xlsx");
                document.body.appendChild(aLink);
                aLink.click();
                document.body.removeChild(aLink); //下载完成移除元素
                window.URL.revokeObjectURL(url); //释放掉blob对象
            },
            upload_student(param) {
                let that=this;
                let fileObj = param.file;
                let FileController = SERVER_BASE+"/import/stuInfo";
                let form = new FormData();
                form.append("file", fileObj);
                axios({
                    headers: {
                        'token': that.globolContext.token
                    },
                    method: 'post',
                    url: SERVER_BASE+'/import/stuInfo?schoolId='+that.schoolId,
                    data: form,
                    responseType: 'blob'
                }).then(function (resp) {
                    if(resp.status==200){
                        let blob=new Blob([resp.data]);
                        if(blob.size==0){
                            that.$message.success("上传成功")
                        }else{
                            that.$message.warning("上传失败")
                            that.download(resp)
                        }
                    }else{
                        that.$message.warning("上传失败")
                    }
                    
                })
            },
            // 导入教师信息
            upload_teacher(param) {
                let that=this;
                let fileObj = param.file;
                let FileController = SERVER_BASE+"/import/teaInfo";
                let form = new FormData();
                form.append("file", fileObj);
                axios({
                    headers: {
                        'token': that.globolContext.token
                    },
                    method: 'post',
                    url: SERVER_BASE+'/import/teaInfo',
                    data: form,
                    responseType: 'blob'
                }).then(function (resp) {
                    if(resp.status==200){
                        let blob=new Blob([resp.data]);
                        if(blob.size==0){
                            that.$message.success("上传成功")
                        }else{
                            that.$message.warning("上传失败")
                            that.download(resp)
                        }
                    }else{
                        that.$message.warning("上传失败")
                    }
                    
                })
            },
            // 导入课表信息
            upload_course(param) {
                let that=this;
                let fileObj = param.file;
                let FileController = SERVER_BASE+"/import/ScheduleInfo";
                let form = new FormData();
                form.append("file", fileObj);
                axios({
                    headers: {
                        'token': that.globolContext.token
                    },
                    method: 'post',
                    url: SERVER_BASE+'/import/ScheduleInfo?schoolId='+that.schoolId_c,
                    data: form,
                    responseType: 'blob'
                }).then(function (resp) {
                    if(resp.status==200){
                        let blob=new Blob([resp.data]);
                        if(blob.size==0){
                            that.$message.success("上传成功")
                        }else{
                            that.$message.warning("上传失败")
                            that.download(resp)
                        }
                    }else{
                        that.$message.warning("上传失败")
                    }
                    
                })
            },
            // 获取期数信息
            getAllSchool() {
                let that=this;
                fileImport.getALLSchool().then(function (resp) {
                    if (resp.data.code == '200') {
                        that.options_stu = resp.data.data.list
                    } else {
                        that.$message.warning("期数获取失败!")
                    }
                })
            }
        },
        mounted() {
            this.loginControl();  //登录控制
            this.getAllSchool(); //加载页面时，获取期数信息
        }
    }
</script>

<style scoped>
.download_stu {
    width: 50%;
}
.link_stu {
    position: absolute;
    right: 120px;
}
.demonstration {
    color: red;
}
</style>
<style>
    .upload-demo {
        margin-top: 15px;
    }
</style>